import Component from "../Component.js";

export default class Uploader extends Component {
    constructor() {
        super();
    }

    // 上传Dxf文件
    async uploadDxf(mine_code, mine_name) {
        // 从input中获取文件信息
        const file = new FormData();
        const field = document.querySelector("input[type='file']");
        file.append("file", field.files[0]);
        file.append('uuid', mine_code);
        file.append('name', mine_name);
        file.append('code', mine_code);

        // 判断是否为dxf文件
        const name = field.files[0].name;
        const len = name.length;
        const dotDxf = name.substring(len-3, len);
        if (dotDxf === 'dxf') {
            // 上传dwg文件
            this.app.dialog.preloader("正在上传图纸...");

            const result = await this.api.uploadDxf(file);
            if (result.code === 0) {
                this.app.dialog.close();
                this.app.dialog.preloader("正在获取矿图...");

                // 从服务器获取文件数据。 后面传一个空字符串表示图纸版本。 返回的会是最新的那个版本的图纸
                const data = await this.api.getVector(result.data.meta_id, '');
                if (data.code === 0) {
                    const metajson = data.data.meta_json[0].geojson
                    const json = JSON.parse(metajson)
                    this.drawer.tiny(json)
                    this.app.dialog.close()
                    this.db.init(data.data)
                }
            }
        } else {
            this.app.toast.create({
                text: '请选择AutoCAD的.dxf格式的文件,其他格式文件无效。',
                position: 'top',
                closeButton: false,
                closeTimeout: 3000
            }).open();
        }
    }

    template() {
        const div = `
            <div class="popup upload-popup" style="height: 220px;">
                <header>更新图纸</header>
                <article>
                    <div class="list inline-labels no-hairlines-md">
                        <ul>
                            <li style="display: none" class="item-content item-input">
                                <div class="item-title item-label" id="upload-name-text">煤矿名称</div>
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="upload-mine-code">
                                            <input type="text" value="" id="upload-mine-name">
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li style="display: none" class="item-content item-input">
                                <div class="item-title item-label" id="upload-code-text">煤矿编码</div>
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="upload-mine-code">
                                            <input type="text" value="" id="upload-mine-code">
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <input type="file" name="upload" accept=".dxf" />
                                </div>
                            </li>
                        </ul>
                    </div>
                </article>
                <footer>
                    <button class="button button-fill color-orange popup-close" id="upload">确定</button>
                    <button class="button button-fill color-gray popup-close">取消</button>
                </footer>
            </div>
        `
        this.$$('#app').append(div);
    }

    control() {
        this.$$("#upload-popup").on("click", () => {
            this.popup = this.app.popup.create({ el: '.upload-popup' });
            this.popup.open();
        });

        // 上传dwg文件
        this.$$("#upload").on("click", async () => {
            // mine_name 代表的就是 图纸的id。
            const meta_id = this.utils.getUrlParamer('meta_id')
            // 生成uuid作为判断图纸是否产生更新的依据
            const meta_code = this.utils.uuid()
            await this.uploadDxf(meta_id, meta_code);
        });

        this.emitter.on("upload-popup", () => {
            this.popup = this.app.popup.create({ el: '.upload-popup' });
            this.popup.open();

            // 上传dwg文件
            this.$$("#upload").on("click", async () => {
                // mine_name 代表的就是 图纸的id。
                const meta_id = this.utils.getUrlParamer('meta_id')
                // 生成uuid作为判断图纸是否产生更新的依据
                const meta_code = this.utils.uuid()
                await this.uploadDxf(meta_id, meta_code);
            },false);
        });
    }
}